<template>
  <div class="box-view" :style="{ width: width ? width + 'px' : '100%', backgroundColor: outerColor }">
    <div class="content" :style="{ backgroundColor: innerColor }">
      <slot></slot>
    </div>
  </div>
</template>

<script setup lang="ts">
defineProps({
  width: {
    type: Number,
    default: 0,
  },
  outerColor: {
    type: String,
    default: '#0f64ff',
  },
  innerColor: {
    type: String,
    default: '#E8F0FD',
  },
});
</script>

<style lang="less" scoped>
.box-view {
  width: 100%;
  height: 80px;
  border-radius: 10px 10px 0 0;
  padding-top: 3px;
  box-sizing: border-box;

  .content {
    border-radius: 10px 10px 0 0;
    width: 100%;
    height: 100%;
  }
}
</style>
